<%--
  Created by IntelliJ IDEA.
  User: 25003
  Date: 2025/3/18
  Time: 18:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>登录页面</title>
  <link rel="icon" href="favicon.ico" type="${pageContext.request.contextPath}/assert/images/ico">
  <link href="${pageContext.request.contextPath}/assert/css/bootstrap.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/assert/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/assert/css/style.min.css" rel="stylesheet">
  <style>
    .lyear-wrapper {
      position: relative;
    }
    .lyear-login {
      display: flex !important;
      min-height: 100vh;
      align-items: center !important;
      justify-content: center !important;
    }
    .lyear-login:after{
      content: '';
      min-height: inherit;
      font-size: 0;
    }
    .login-center {
      background: #fff;
      min-width: 29.25rem;
      padding: 2.14286em 3.57143em;
      border-radius: 3px;
      margin: 2.85714em;
    }
    .login-header {
      margin-bottom: 1.5rem !important;
    }
    .login-center .has-feedback.feedback-left .form-control {
      padding-left: 38px;
      padding-right: 12px;
    }
    .login-center .has-feedback.feedback-left .form-control-feedback {
      left: 0;
      right: auto;
      width: 38px;
      height: 38px;
      line-height: 38px;
      z-index: 4;
      color: #dcdcdc;
    }
    .login-center .has-feedback.feedback-left.row .form-control-feedback {
      left: 15px;
    }
  </style>
</head>

<body>
<div class="row lyear-wrapper" style="background-image: url(${pageContext.request.contextPath}/assert/images/login-bg-2.jpg); background-size: cover;">
  <div class="lyear-login">
    <div class="login-center">
      <div class="login-header text-center">
        <a href="index.html"> <img alt="light year admin" src="${pageContext.request.contextPath}/assert/images/logo-sidebar.png"> </a>
      </div>
      <form action="${pageContext.request.contextPath}/login" id="myform" method="post">
        <div class="form-group has-feedback feedback-left">
          <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" />
          <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left">
          <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" />
          <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
        </div>
        <div class="form-group has-feedback feedback-left row">
          <div class="col-xs-7">
            <input type="text" name="captcha" class="form-control" placeholder="验证码">
            <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
          </div>
          <div class="col-xs-5">
            <img src="${pageContext.request.contextPath}/captcha" class="pull-right" id="captcha" style="cursor: pointer;" onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">
          </div>
        </div>
        <div class="form-group" style="text-align: center" >
          <input type="radio" name="userType" checked value="admin">管理员
          <input type="radio" name="userType" value="student">学生
        </div>
        <div class="form-group">
<%--          onclick="login()--%>
          <button class="btn btn-block btn-primary btn-round" type="submit">立即登录</button>
        </div>
      </form>
      <hr>
      <footer class="col-sm-12 text-center">
        <p class="m-b-0">Copyright © 2019 <a href="http://lyear.itshubao.com">IT书包</a>. All right reserved</p>
      </footer>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assert/js/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/assert/js/bootstrap.min.js"></script>
<script type="text/javascript">

  //方式二：按钮的方式是type="button" 那么采用在该元素中标签中使用函数进行跳转 当点击按钮的时候执行自定义的函数login()方法，
  <%--function login(){--%>
  <%--  //前端发送请求（携带 username、password、userType 等参数）。--%>
  <%--  // let username= $("#username").val()--%>
  <%--  // let password= $("#password").val()--%>
  <%--  // let userType= $("input[name=userType]:checked").val()--%>
  <%--  // console.log(userType,username,password)--%>
  <%--  //将参数进行一个序列化变为：url/?username=?&password=?&userType=?--%>
  <%--  var serialize = $("#myform").serialize();--%>
  <%--  console.log(serialize)--%>
  <%--  $.ajax({--%>
  <%--    type:"post",--%>
  <%--    url:"${pageContext.request.contextPath}/login",--%>
  <%--    dataType:"json",--%>
  <%--    //前端通过 $.ajax 发送请求，并设置 dataType: 'json'。--%>
  <%--    //jQuery 会自动将后端返回的 JSON 格式的字符串解析为 JavaScript 对象。--%>
  <%--    //data:{}里面是要传递个后端的参数，这些参数是表单中传递给后端使用的，也可以进行简化的方式--%>
  <%--    //例如在上面定义了一个序列化过的变量，和data{username,password,userType}的效果是一样的--%>
  <%--    //--%>
  <%--    data:serialize,--%>
  <%--    ////后端进行传递的对象会经过解析以参数的形式传递给 success：回调函数。前提是这个请求必须顺利的执行完--%>
  <%--    success:function (data){--%>
  <%--      //后端处理请求，返回 JSON 格式的字符串--%>
  <%--      //这里的data指的是后端传回来的json字符串格式的对象--%>
  <%--      console.log("这是返回的数据:")--%>
  <%--      console.log(data)//经过前的解析会变为javaScript对象--%>
  <%--      //下面的data.success指的是返回过来的data对象是有一个属性为success，并且这个success的类型是为boolean--%>
  <%--      if(data.success){--%>
  <%--        //如果返回的是true就进行页面的跳转--%>
  <%--        location.href = '${pageContext.request.contextPath}/index.jsp'--%>
  <%--      }else {--%>
  <%--        //否则给用户进行提示--%>
  <%--        alert(data.msg);--%>
  <%--      }--%>
  <%--    },--%>
  <%--    error:function (){--%>
  <%--      alert("请求服务器错误！");--%>
  <%--    }--%>
  <%--  })--%>
  <%--}--%>



     //方式二：使用submit方式进行ajax请求
     //       表单提交会有一个默认的提交，需要先把默认的提交进行关闭，否则下面的函数执行完之后，还会执行一个默认的表单提交的方式，会覆盖$ajax({})请求
     $("#myform").submit(function (event) {
       //阻止默认提交表单的方式
       event.preventDefault();
       //发送ajax请求
       $.ajax({
         url:"${pageContext.request.contextPath}/login",
         type:"post",
         //将表单的数据进行序列化请求参数变成url？username=?&password=?
         data:$("#myform").serialize(),
         //服务器返回的数据类型
         dataType:"json",
         //请求成功执行的业务
         success:function (data){
           //后端处理请求，返回 JSON 格式的字符串
           //这里的data指的是后端传回来的json字符串格式的对象
           console.log("这是返回的数据:")
           console.log(data)//经过前的解析会变为javaScript对象
           //下面的data.success指的是返回过来的data对象是有一个属性为success，并且这个success的类型是为boolean
           if(data.success){
             //如果返回的是true就进行页面的跳转
             location.href = '${pageContext.request.contextPath}/index.jsp'

             //请求失败执行的业务逻辑
           }else {
             //否则给用户进行提示
             alert(data.msg);
           }
         },
         error:function (){
           alert("请求服务器错误！");
         }
       })
     })
</script>
</body>
</html>